import { memo } from 'react'
import { ListWrapper, ListItem, List } from './style'
import LazyLoad from 'react-lazyload'
import music from './music.jpg'
import { useNavigate } from 'react-router-dom'


export function RecommendList({ recommendList }) {
    // console.log(recommendList, '============');
    let navigate = useNavigate();
    const gotoDetail = (id) => {
        navigate(`/recommend/${id}`)
    }
    return (
        <ListWrapper>
            <h1 className='title'>推荐歌单</h1>
            <List>
                {
                    recommendList.map(item => {
                        return (
                            <ListItem key={item.id} onClick={() => gotoDetail(item.id)} >
                                <div className="img_wrapper">
                                    <div className="decorate">
                                        <LazyLoad
                                            // 占位图片
                                            placeholder={<img
                                                width="100%"
                                                height="100%"
                                                src={music} />}>
                                            <img width="100%"
                                                height="100%"
                                                src={item.picUrl + "?param=300*300"}
                                            />
                                        </LazyLoad>
                                    </div>
                                </div>
                            </ListItem>
                        )
                    })
                }
            </List>
        </ListWrapper>
    )
}

// 性能优化 子组件
export default memo(RecommendList)